<template>
	<view>
		<image class="bg" src="../../static/img/bg.png"></image>
		<view class="loginIn-page">
			<view class="login">
				<view class="login-title">登录</view>
				<view class="login-inp">
					<image src="../../static/img/user.png"></image>
					<input placeholder-class="ps" placeholder="账号" />
				</view>
				<view class="login-inp">
					<image src="../../static/img/password.png"></image>
					<input type="password" placeholder-class="ps" placeholder="密码" />
				</view>
				<view class="login-items">
					<view class="login-logon">注册</view>
					<view class="forgetpassword">忘记密码？</view>
				</view>
				<button class="login-btn">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"loginin-Component"
	}
</script>

<style>
	.loginIn-page{
		/* 定位可以改变区域大小至全屏 */
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #00A3BC;
		/* 弹性容器 */
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255,0.1);
	}
	.login{
		width: 90%;
		height: 80%;
		/* a就是透明度 0完全透明~1不透明 */
		background-color: rgba(255, 255, 255,0.2);
		/* 设置圆角 */
		border-radius: 50rpx;
		/* 弹性容器 */
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
	}
	/* 标题 */
	.login-title{
		font-size: 70rpx;
		color: #0F2105;
		margin-top: 180rpx;
		margin-bottom: 60rpx;
	}
	/* 输入框 */
	.login-inp{
		/* 字体默认大小40rpx + 20*2rpx + 4*2rpx = 88rpx */
		display: flex;
		border: 4rpx solid #00A0FF;
		padding: 15rpx;
		/* 设置圆角 */
		border-radius: 40rpx ;
		/* 设置长度 */
		width: 70%;
		margin-bottom: 60rpx;
		align-items: center;
	}
	.login-inp image{
		width: 30rpx;
		height: 30rpx;
		/* flex: 1; */
	}
	/* 提示文字的颜色 */
	.ps{
		color: #0F2105;
		margin-left:10rpx;	
	}
	/* 按钮 */
	.login-btn{
		margin-top: 60rpx;
		width: 80%;
		height: 75rpx;
		line-height: 65rpx;
		background-color: #00A0FF;
		color: white;
		border-radius: 30rpx;
	}
	.login-items{
		display: flex;
		justify-items:space-between;
		color:#0F2105;
	}
	.login-logon{
		margin-right:250rpx ;
	}
	.bg{
		/* 填充整个页面 */
		position: absolute;
		width: 100%;
		height: 100%;
	}
</style>